<template>
  <div>
    <div :class="showCartDialog ? 'bs-cart-dialog cur' : 'bs-cart-dialog'">
      <div class="tit">
        <span>Cart <b>3</b></span>
        <a href="javascript:" class="close" @click="showCartDialog = false"></a>
      </div>
      <div v-if="source.length === 0" class="cart-empty">
        <p>Your cart is empty</p>
        <a href="">Shop Now</a>
      </div>
      <template v-else>
        <div class="cart-dialog-main">
          <div class="cart-list">
            <div class="event-tip">
              <em>EVENT</em>
              <span
                >You have joined in the XX series earrings event: 2 pieces for
                $49</span
              >
            </div>
            <div class="cart-cell">
              <a href="javascript:" class="delete"></a>
              <div class="pic">
                <img src="/data/pic/ring2.jpg" alt="" />
              </div>
              <div class="info">
                <div class="name">Figure Slim Stacker Set</div>
                <div class="des">Material: 14ct Solid Yellow Gold</div>
                <div class="des">Occasion: Occasion1</div>
                <div class="add-count">
                  <div class="minus"></div>
                  <input type="text" />
                  <div class="add"></div>
                </div>
                <div class="price">$49.00</div>
              </div>
            </div>
            <div class="sub-total"><span>(-$49.00)</span>Subtotal:$49.00</div>
          </div>
          <div class="cart-list">
            <div class="cart-cell">
              <a href="javascript:" class="delete"></a>
              <div class="pic">
                <img src="/data/pic/ring2.jpg" alt="" />
              </div>
              <div class="info">
                <div class="name">Figure Slim Stacker Set</div>
                <div class="des">Material: 14ct Solid Yellow Gold</div>
                <div class="des">Occasion: Occasion1</div>
                <div class="fall"><i></i>FALL20%</div>
                <div class="add-count">
                  <div class="minus"></div>
                  <input type="text" />
                  <div class="add"></div>
                </div>
                <div class="price"><em>$49.00</em>$49.00</div>
              </div>
            </div>
          </div>
          <a href="" class="view-all"><span>View All Products</span></a>
        </div>
        <div class="order-summary">
          <div class="summary-info">
            <div class="lb">Tax</div>
            <div class="val">FREE</div>
          </div>
          <div class="summary-info">
            <div class="lb">Shipping</div>
            <div class="val">- $60.00</div>
          </div>
          <div class="summary-info">
            <div class="lb">Discounts</div>
            <div class="val">
              <div class="vl"><span class="event">event</span>- $49.00</div>
              <div class="vl"><span class="fall">Fall20%</span>- $49.00</div>
            </div>
          </div>
          <div class="sub-total">
            <div class="total-t">
              <b>Subtotal</b>
              <b>$1,555.00</b>
            </div>
            <div class="btn">
              <router-link to="/cart">DETAIL</router-link>
              <a href="" class="check-out">CHECKOUT</a>
            </div>
          </div>
        </div>
      </template>
    </div>
    <div v-if="showCartDialog" class="full-musk" style="display: block"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showCartDialog: false,
      source: [1],
    };
  },
  methods: {
    show() {
      this.showCartDialog = true;
    },
  },
};
</script>
